<template>
	<div class="banner">
		<!-- 查询内容区域 -->
		<div class="select">
			<!-- <span><input type="text"><button>查询内容</button></span> -->
			<el-button type="danger">请输入查询内容</el-button>
			<input type="text" placeholder="请输入内容" v-model="texts" style="width: 70%;line-height: 38px;border: 1px solid gainsboro;border-radius: 6px;outline: none;text-indent: 1em;margin-right: 0.5%;" >
			<!-- <el-input v-model="input" size="small" placeholder="请输入内容" /> -->
			<el-button type="danger" @click="toDetail()"><el-icon><Search /></el-icon></el-button>
			<hr style="border-color: gainsboro;"/>
		</div>
		<!-- el轮播区域 -->
		<el-carousel class="rotation"
			trigger="click"
			arrow="always"
		>
			<el-carousel-item v-for="item in maps" :key="item.id">
				<img :src="item.src">
			</el-carousel-item>
		</el-carousel>
		<!-- 主体的轮播区域 -->
		<!-- <div class="rotation">
			<div class="button_left"><i>左</i></div>
			<div class="button_right" @click="add()"><i>右</i></div>
			<ul>
				<li v-for="item in maps" :key="item.id" >
					<img :src="item.src">
				</li>
			</ul>
		</div> -->
	</div>
</template>

<script>
	import { Search } from '@element-plus/icons-vue';
	export default{
		name : 'Banner',
		components:{
			Search
		},
		data(){
			return {
				texts : '',
				maps : [
					{ id : 1 , src : '/bannerImg/banner1.jpg' },
					{ id : 2 , src : '/bannerImg/banner2.jpg' },
					{ id : 3 , src : '/bannerImg/banner3.jpg' },
					{ id : 4 , src : '/bannerImg/banner4.jpg' },
					{ id : 5 , src : '/bannerImg/banner5.jpg' },
				],
				index : 0,
			}
		},
		methods:{
			toDetail(){
				if( this.texts != '' ){
					this.$router.push( {
						path : '/home/detail',
						query:{
							key : this.texts,
						}
					} );
				}else{
					this.$router.push( '/home/detail' );
				}
				// this.axios.post( '/api/public/book/findIf/0/8' , this.texts , {
				// 	headers : { 'Content-Type' : 'application/x-www-form-urlencoded' }
				// } ).then( (res)=>{
				// 	console.log(res.data);
				// } ).catch( (error)=>{
				// 	console.log(error);
				// } );
				
			}
		},
		created(){
			this.axios.get( '/api/public/book/findFav5' ).then( (res)=>{
				// console.log(res);
			} ).catch( (error)=>{
				console.log(error);
			} );
		}
	}
</script>

<style scoped>
	.el-carousel__item img{
		width: 100%;
		height: 100%;
	}
	.el-carousel__arrow--left
	{
		
	}
	.el-carousel__arrow--right
	{
		
	}
	.banner .select{
		width: 98%;
		float: left;
		margin-left: 1%;
		margin: 30px 0 0 0;
		/* border-top: 1px solid #cbcbcb;
		border-bottom: 1px solid #cbcbcb; */
		position: absolute;
		top: 60px;
		z-index: 2;
	}
	.select button:nth-child(1){
		margin-left: 8%;
	}
	.banner .select span{
		float: right;
		margin-right: 5%;
		line-height: 80px;
	}
	.banner .select span input{
		width: 500px;
		height: 50px;
		border: 0;
		border: 1px solid #d4d4d4;
		border-radius: 6px;
		margin-right: 5px;
		outline: none;
		text-indent: 1em;
	}
	.banner .select span button{
		width: 100px;
		height: 50px;
		border-radius: 6px;
		border: 0;
		background-color: #42B983;
		color: white;
		font-size: 16px;
		cursor: pointer;
	}
	.banner .select span button:hover{
		background-color: red;
	}
	.banner .button_left,.banner .button_right{
		width: 100px;
		height: 100%;
		text-align: center;
		color: white;
		font-size: 18px;
		cursor: pointer;
		background-color: skyblue;
	}
	.banner .button_left i,.banner .button_right i{
		line-height: 320px;
	}
	.banner .button_left{
		position: absolute;
		z-index: 999;
		float: left;
	}
	.banner .button_right{
		position: absolute;
		z-index: 999;
		right: 0;
		float: right;
	}
	.banner .rotation{
		width: 95%;
		height: 300px;
		background-color: pink;
		position: absolute;
		top: 165px;
		margin-left: 2%;
		overflow: hidden;
	}
	.banner .rotation ul{
		list-style: none;
		position: absolute;
		display: inline-block;
		margin-left: 60px;
		margin-top: 0px;
		width: 500%;
	}
	.banner .rotation ul>li{
		float: left;
	}
	.banner .rotation ul li{
		width: 20%;
		height: 100%;
		float: left;
	}
	.banner .rotation ul img{
		width: 100%;
		height: 360px;
	}
	/* .banner .rotation ul img:nth-child(5){
		width: 90%;
	} */
	
</style>
